$_img_path: $img_path + 'p4/';
.p4 {
  $origin_width: 640px;
  $origin_height: 1008px;
  $marginTop: 40px;
  background: url($_img_path + 'bg4.jpg') no-repeat;
  background-size: cover;
  @at-root {
    $interval: .3;
    $text_atime: .5s;
    $text_time: $text_atime+$slide_atime;
    $result_atime: .5s;
    $result_time: $text_time+$result_atime+$interval;
    $result2_atime: .5s;
    $result2_time: $result_time+$result2_atime+$interval;
    $result3_atime: .5s;
    $result3_time: $result2_time+$result_atime+$interval;
    $result4_atime: .5s;
    $result4_time: $result3_time+$result_atime+$interval;
    .css_p4_helper {
      height: $marginTop;
    }

    .text_p4_img {
      $origin_width: 540px;
      $origin_height: 90px;
      background: url($_img_path + 'text.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 0 auto;
      opacity: 0;
      @at-root  .p4.showing #{&} {
        @include vp(transition, all $text_atime + $slide_atime ease-in-out);
        opacity: 1
      }
    }

    .result_p4_container {
      position: absolute;
      left: 50%;
      top: 50%;
      @include vp(transform, translateX(-50%) translateY(-50%));
      @at-root {
        .result1_container_img {
          $origin_width2: 547px;
          $origin_height: 93px;
          background: url($_img_path + 'result1.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          @include vp(transform-origin, left center);
          @include vp(transform, scaleX(0.1));
          opacity: 0;
          @at-root  .p4.showing #{&} {
            @include vp(transition, all $result_atime $result_time ease-in-out);
            @include vp(transform, scaleX(1));
            opacity: 1;
          }

        }

        .result2_container_img {
          $origin_width: 467px;
          $origin_height: 93px;
          background: url($_img_path + 'result2.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin: 10px 0;
          @include vp(transform-origin, left center);
          @include vp(transform, scaleX(0.1));
          opacity: 0;
          @at-root  .p4.showing #{&} {
            @include vp(transition, all $result2_atime $result2_time ease-in-out);
            @include vp(transform, scaleX(1));
            opacity: 1;
          }
        }

        .result3_container_img {
          $origin_width: 547px;
          $origin_height: 93px;
          background: url($_img_path + 'result3.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          @include vp(transform-origin, left center);
          @include vp(transform, scaleX(0.1));
          opacity: 0;
          @at-root  .p4.showing #{&} {
            @include vp(transition, all $result3_atime $result3_time ease-in-out);
            @include vp(transform, scaleX(1));
            opacity: 1;
          }
        }

        .result4_container_img {
          $origin_width: 467px;
          $origin_height: 93px;
          background: url($_img_path + 'result4.png') no-repeat;
          background-size: $origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin: 10px 0;
          @include vp(transform-origin, left center);
          @include vp(transform, scaleX(0.1));
          opacity: 0;
          @at-root  .p4.showing #{&} {
            @include vp(transition, all $result4_atime $result4_time ease-in-out);
            @include vp(transform, scaleX(1));
            opacity: 1;
          }
        }
      }
    }
  }
}